
import React, { useState, useEffect, useCallback } from 'react';
import { useHistory } from 'react-router-dom';
import { postAccFeedbackInfoFindAudit } from '../../financialApi';
import SelectModule from './components/SelectModule';
import OKModule from './components/OKModule'
import { FinanceFeedBackOkAll, FinanceFeedBackOkTop, FinanceFeedBackOkContent } from './style';
import { message, Button, Table, Space } from 'antd';

const FinanceFeedBackOk = () => {
    const history = useHistory();
    const [listData, setListData] = useState([]);
    const [pagingData, setPagingData] = useState({
        currentPage: 1,
        size: 10,
        total: 0
    })
    const [selectData, setSelectData] = useState({}); //搜索data
    const [okModuleShow, setOkModuleShow] = useState(false);
    const [clickId, setClickId] = useState(undefined);
    const listFun = useCallback((
        parames = {
            currentPage: 1,
            size: 10
        }
    ) => {
        ; (async () => {
            const { code, msg, data } = await postAccFeedbackInfoFindAudit(parames);
            if (code === '20000') {
                setListData(data.records);
                setPagingData({
                    currentPage: parames.currentPage,
                    size: parames.size,
                    total: data.total
                });
            } else {
                message.error(msg);
            }
        })();
    }, [])
    useEffect(() => {
        listFun();
    }, [listFun]);
    //搜索-- 搜索
    const handleSelectModuleOk = values => {
        const parames = {
            currentPage: 1,
            size: 10,
            ...values
        }
        setSelectData(values)
        listFun(parames);
    }
    //搜索-- 重置
    const handleSelectModuleReset = () => {
        listFun();
    }
    //分页
    const pagination = {
        //是否可以改变pagesize//
        showSizeChanger: true,
        //是否可以快速跳转到某页
        showQuickJumper: true,
        //展示一共有多少条数据//
        showTotal: () => `共${pagingData.total}条`,
        //每页条数
        pageSize: pagingData.size,
        //当前页数
        current: pagingData.currentPage,
        //数据总数
        total: pagingData.total,
        //pageSize 变化的回调
        onShowSizeChange: (current, pageSize) => changePageSize(pageSize, current),
        //页码改变的回调，参数是改变后的页码及每页条数
        onChange: (current) => changePage(current),
    }
    //改变每页条数
    const changePageSize = (pageSizeFun, current) => {
        const parames = {
            currentPage: current,
            size: pageSizeFun,
            ...selectData
        }
        listFun(parames);
    }
    //改变页数
    const changePage = (current) => {
        const parames = {
            currentPage: current,
            size: pagingData.size,
            ...selectData
        }
        listFun(parames);
    }
    //确认
    const handleOk = id => {
        setClickId(id)
        setOkModuleShow(true);
    }
    //详情
    const handleEnterDetails = id => {
        history.push({
            pathname: '/financeFeedBack/details',
            state: {id}
        })
    }
    const columns = [
        {
            title: '序号',
            align: 'center',
            width: '60px',
            render: (text, recode, index) => <span>{index + 1}</span>
        },
        {
            title: '反馈编号',
            align: 'center',
            dataIndex: 'backNo'
        },
        {
            title: '费用情况',
            align: 'center',
            dataIndex: 'situation'
        },
        {
            title: '承担部门',
            align: 'center',
            dataIndex: 'assumeDepName'
        },
        {
            title: '承担人员',
            align: 'center',
            dataIndex: 'assumeMainName'
        },
        {
            title: '报销人',
            align: 'center',
            dataIndex: 'applicantName'
        },
        {
            title: '实报金额',
            align: 'center',
            dataIndex: 'money'
        },
        {
            title: '办事结果',
            align: 'center',
            dataIndex: 'result'
        },
        {
            title: '审核状态',
            align: 'center',
            dataIndex: 'state'
        },
        {
            title: '操作',
            align: 'center',
            render: (text, recode) => (<Space>
                <Button type= "link" style={{ marginRight: "30px" }}  onClick={() => handleOk(recode.id)}>确认</Button>
                <Button type="link" style={{ marginRight: "30px" }}  onClick={() => handleEnterDetails(recode.id)}>详情</Button>
            </Space>)
        },

    ];
    return <FinanceFeedBackOkAll>
        <FinanceFeedBackOkTop>
            <SelectModule
                handleSelectModuleOk={handleSelectModuleOk}
                handleSelectModuleReset={handleSelectModuleReset}
            />
        </FinanceFeedBackOkTop>
        <FinanceFeedBackOkContent>
            <Table dataSource={listData} columns={columns} rowKey='id' pagination={pagination} />
        </FinanceFeedBackOkContent>
        <OKModule 
            okModuleShow = {okModuleShow}
            setOkModuleShow = {setOkModuleShow}
            clickId = {clickId}
            setClickId = {setClickId}
            listFun = {listFun}
        />
    </FinanceFeedBackOkAll>
}

export default FinanceFeedBackOk;